<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Mark Of The Web- see http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp for info why this is here -->
<!-- saved from url=(0024)http://www.microsoft.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WPF/E QuickStart: media</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type='text/javascript' src='samples/aghost.js'></script>
</head>

<body>



<div class="header-section">
<table>
  <tr>
  <td><img src="images/movienotebook.png" /></td><td><h1>media</h1></td>
  </tr>
</table>
</div>
<a class="showtoclink" href="media-frames.html">show toc</a>
<div class="intro-section">
<p>WPF/E provides a <span class="api-name">MediaElement</span> object that you can use to play WMV (Windows Media Video) and WMA (Windows Media Audio) files.</p>
<p>This document contains the following sections.</p>
        <ul>
            <li><a href="#addmedia">add media to your page</a></li>
            <li><a href="#usefulprops">useful MediaElement properties</a></li>
            <li><a href="#interactive">interactively controlling media playback</a></li>
            <li><a href="#fullscreen">full-screen media playback</a></li>

            <li><a href="#whatsnext">what's next?</a></li>
        </ul>
</div>



<div class="section">
<a name="addmedia"></a>
<h3>add media to your page</h3>
<p>To add media to your files, you create a <span class="api-name">MediaElement</span> and set its
<span class="api-name">Source</span> property to point to your media file. The following is an example.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml0_hyperlink' onclick="toggleCode('xaml0','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for media-simple.xaml-->
<pre id='xaml0' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
    
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>MediaElement</span> <span class='code-red'>Source</span><span class='code-blue'>=</span><span class='code-blue'>"xbox.wmv"</span></strong> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag0_hyperlink' onclick="toggle_ag0()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag0_restart' onclick="restart_ag0();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag0Host">
    </div>

    <script type="text/javascript">
    var ag0visible = !(false);

    function toggle_ag0() {
        var text = "preview";
        if (ag0visible) {
            ag0visible = false;

            var element = document.getElementById("ag0Host");
            element.style.display = "none";
			element = document.getElementById("ag0_restart");
            element.style.display = "none";


            document.getElementById("ag0_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag0Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag0", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/media-simple.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag0Host");
            element.style.display = "";
            ag0visible = true;
			element = document.getElementById("ag0_restart");
            element.style.display = "";
            document.getElementById("ag0_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag0() {

	            new agHost(
	                "ag0Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag0", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/media-simple.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag0visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag0();
    </script>

<p>Like other <span class="api-name">UIElement</span> objects, you can put drawings on top of
<span class="api-name">MediaElement</span>
objects. The following example adds an <span class="api-name">Ellipse</span> in front of the
<span class="api-name">MediaElement</span> from the previous example.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml1_hyperlink' onclick="toggleCode('xaml1','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for media-composition.xaml-->
<pre id='xaml1' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
   
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>MediaElement</span></strong> <span class='code-red'>Source</span><span class='code-blue'>=</span><span class='code-blue'>"xbox.wmv"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-blue'>/&gt;</span>
  
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>Ellipse</span></strong> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span>
     <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"SlateBlue"</span>
     <span class='code-red'>Opacity</span><span class='code-blue'>=</span><span class='code-blue'>"0.6"</span> <span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag1_hyperlink' onclick="toggle_ag1()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag1_restart' onclick="restart_ag1();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag1Host">
    </div>

    <script type="text/javascript">
    var ag1visible = !(false);

    function toggle_ag1() {
        var text = "preview";
        if (ag1visible) {
            ag1visible = false;

            var element = document.getElementById("ag1Host");
            element.style.display = "none";
			element = document.getElementById("ag1_restart");
            element.style.display = "none";


            document.getElementById("ag1_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag1Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag1", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/media-composition.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag1Host");
            element.style.display = "";
            ag1visible = true;
			element = document.getElementById("ag1_restart");
            element.style.display = "";
            document.getElementById("ag1_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag1() {

	            new agHost(
	                "ag1Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag1", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/media-composition.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag1visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag1();
    </script>

</div>

<div class="section">
<a name="usefulprops"></a>
<h3>useful MediaElement properties</h3>
<p>In addition to the properties <span class="api-name">MediaElement</span> gets for being a
<span class="api-name">UIElement</span>, such as <span class="api-name">Opacity</span> and
<span class="api-name">Clip</span>, <span class="api-name">MediaElement</span> provides several media-specific properties:</p>
<ul>
<li><span class="api-name">Stretch</span>: Specifies how video is stretched to fill the
<span class="api-name">MediaElement</span>.
Possible values are <code>None</code>, <code>Uniform</code>, <code>UniformToFill</code>, and <code>Fill</code>.
The default is <code>Fill</code>. For more information about the
<span class="api-name">Stretch</span> property, see the WPF/E SDK.</li>
<li><span class="api-name">IsMuted</span>: Specifies whether the
<span class="api-name">MediaElement</span> is muted. A value of <code>True</code> mutes the
<span class="api-name">MediaElement</span>. The default value is <code>False</code>.</li>
<li><span class="api-name">Volume</span>: Specifies the volume of the
<span class="api-name">MediaElement</span> object&#39;s audio as a value from 0 to 1, with 1 being the loudest. The default value is 0.5.</li>
</ul>
<p>See the WPF/E SDK for additional <span class="api-name">MediaElement</span> properties.</p>
</div>


<div class="section">
<a name="interactive"></a>
<h3>interactively controlling media playback</h3>
<p>You can interactively control media playback by using the
<span class="api-name">play</span>, <span class="api-name">pause</span>, and
<span class="api-name">stop</span> methods. The following example uses the
<span class="api-name">play</span>, <span class="api-name">pause</span>, and
<span class="api-name">stop</span> methods to interactively control media playback.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml2_hyperlink' onclick="toggleCode('xaml2','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for media-scripting.xaml-->
<pre id='xaml2' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
    
  <span class='code-blue'>&lt;</span><span class='code-brown'>MediaElement</span> <strong><span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"media"</span></strong> <span class='code-red'>Source</span><span class='code-blue'>=</span><span class='code-blue'>"xbox.wmv"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-blue'>/&gt;</span>

  <span class='code-blue'>&lt;!--</span><span class='code-green'> Stops media playback.</span><span class='code-blue'>--&gt;</span>    
  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:media_stop"</span> 
    <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"265"</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> 
       <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"55"</span> <span class='code-red'>RadiusX</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>RadiusY</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>RadialGradientBrush</span> <span class='code-red'>GradientOrigin</span><span class='code-blue'>=</span><span class='code-blue'>"0.75,0.25"</span><span class='code-blue'>&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Orange"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>        
        <span class='code-blue'>&lt;/</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>       
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span><span class='code-black'>stop</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span> 
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;!--</span><span class='code-green'> Pauses media playback. </span><span class='code-blue'>--&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:media_pause"</span> 
     <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"70"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"265"</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> 
       <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"55"</span> <span class='code-red'>RadiusX</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>RadiusY</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>RadialGradientBrush</span> <span class='code-red'>GradientOrigin</span><span class='code-blue'>=</span><span class='code-blue'>"0.75,0.25"</span><span class='code-blue'>&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Yellow"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Orange"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>        
        <span class='code-blue'>&lt;/</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>       
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span><span class='code-black'>pause</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span> 
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;!--</span><span class='code-green'> Begins media playback. </span><span class='code-blue'>--&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:media_begin"</span> 
    <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"130"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"265"</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>RadiusX</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>RadiusY</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span>
       <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"55"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>RadialGradientBrush</span> <span class='code-red'>GradientOrigin</span><span class='code-blue'>=</span><span class='code-blue'>"0.75,0.25"</span><span class='code-blue'>&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"LimeGreen"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Green"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>        
        <span class='code-blue'>&lt;/</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span><span class='code-black'>play</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span> 
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
     
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='js2_hyperlink' onclick="toggleCode('js2','JavaScript')">[hide JavaScript]</span></p>
<script type='text/javascript' src='samples/media-scripting.js'></script>
<!-- Inserting sample for samples/media-scripting.js-->
<pre id='js2' class='xaml'><span class='code-blue'>function</span> <span class='code-black'>media_stop</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"media"</span><span class='code-black'>)</span><span class='code-black'>.</span><strong><span class='code-black'>stop</span><span class='code-black'>(</span><span class='code-black'>)</span></strong><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>media_pause</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"media"</span><span class='code-black'>)</span><span class='code-black'>.</span><strong><span class='code-black'>pause</span><span class='code-black'>(</span><span class='code-black'>)</span></strong><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>media_begin</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"media"</span><span class='code-black'>)</span><span class='code-black'>.</span><strong><span class='code-black'>play</span><span class='code-black'>(</span><span class='code-black'>)</span></strong><span class='code-black'>;</span>
<span class='code-black'>}</span>
</pre>


    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag2_hyperlink' onclick="toggle_ag2()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag2_restart' onclick="restart_ag2();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag2Host">
    </div>

    <script type="text/javascript">
    var ag2visible = !(false);

    function toggle_ag2() {
        var text = "preview";
        if (ag2visible) {
            ag2visible = false;

            var element = document.getElementById("ag2Host");
            element.style.display = "none";
			element = document.getElementById("ag2_restart");
            element.style.display = "none";


            document.getElementById("ag2_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag2Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag2", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/media-scripting.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag2Host");
            element.style.display = "";
            ag2visible = true;
			element = document.getElementById("ag2_restart");
            element.style.display = "";
            document.getElementById("ag2_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag2() {

	            new agHost(
	                "ag2Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag2", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/media-scripting.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag2visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag2();
    </script>

</div>

<div class="section">
<a name="fullscreen"></a>
<h3>full-screen media playback</h3>
<p>For full-screen media playback, set the <span class="api-name">FullScreen</span> property of the
ActiveX control
that hosts your content to <code>True</code>
and adjust the size of the <span class="api-name">MediaElement</span> to the
<span class="api-name">ActualWidth</span> and <span class="api-name">ActualHeight</span> reported by the control.</p>
<p>The following example adds full-screen playback to the interactive controls
defined in the preceding example.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml3_hyperlink' onclick="toggleCode('xaml3','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for media-fullscreen.xaml-->
<pre id='xaml3' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span>
   <span class='code-red'>Loaded</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:canvas_loaded"</span><span class='code-blue'>&gt;</span>
    
  <span class='code-blue'>&lt;</span><span class='code-brown'>MediaElement</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"media"</span> <span class='code-red'>Source</span><span class='code-blue'>=</span><span class='code-blue'>"xbox.wmv"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-blue'>/&gt;</span>

  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"buttonPanel"</span><span class='code-blue'>&gt;</span>
  
    <span class='code-blue'>&lt;!--</span><span class='code-green'> Stops media playback.</span><span class='code-blue'>--&gt;</span>    
    <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:media_stop"</span> 
       <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"265"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> 
         <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"55"</span> <span class='code-red'>RadiusX</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>RadiusY</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>RadialGradientBrush</span> <span class='code-red'>GradientOrigin</span><span class='code-blue'>=</span><span class='code-blue'>"0.75,0.25"</span><span class='code-blue'>&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Orange"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>        
          <span class='code-blue'>&lt;/</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>       
      <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span><span class='code-black'>stop</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span> 
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
  
    <span class='code-blue'>&lt;!--</span><span class='code-green'> Pauses media playback. </span><span class='code-blue'>--&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:media_pause"</span> 
       <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"70"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"265"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> 
         <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"55"</span> <span class='code-red'>RadiusX</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>RadiusY</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>RadialGradientBrush</span> <span class='code-red'>GradientOrigin</span><span class='code-blue'>=</span><span class='code-blue'>"0.75,0.25"</span><span class='code-blue'>&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Yellow"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Orange"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>        
          <span class='code-blue'>&lt;/</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>       
      <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span><span class='code-black'>pause</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span> 
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
  
    <span class='code-blue'>&lt;!--</span><span class='code-green'> Begins media playback. </span><span class='code-blue'>--&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:media_begin"</span> 
       <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"130"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"265"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>RadiusX</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>RadiusY</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span>
         <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"55"</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>RadialGradientBrush</span> <span class='code-red'>GradientOrigin</span><span class='code-blue'>=</span><span class='code-blue'>"0.75,0.25"</span><span class='code-blue'>&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"LimeGreen"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Green"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>        
          <span class='code-blue'>&lt;/</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span><span class='code-blue'>&gt;</span><span class='code-black'>play</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span> 
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
  
    <span class='code-blue'>&lt;!--</span><span class='code-green'> Switches to full screen mode. </span><span class='code-blue'>--&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:toggle_fullScreen"</span> 
      <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"190"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"265"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>RadiusX</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>RadiusY</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span>
         <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"85"</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>RadialGradientBrush</span> <span class='code-red'>GradientOrigin</span><span class='code-blue'>=</span><span class='code-blue'>"0.75,0.25"</span><span class='code-blue'>&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Gray"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"0.0"</span> <span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>GradientStop</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span> <span class='code-red'>Offset</span><span class='code-blue'>=</span><span class='code-blue'>"1.0"</span> <span class='code-blue'>/&gt;</span>        
          <span class='code-blue'>&lt;/</span><span class='code-brown'>RadialGradientBrush</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle.Fill</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>Rectangle</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span>
        <span class='code-red'>Foreground</span><span class='code-blue'>=</span><span class='code-blue'>"White"</span> <span class='code-blue'>&gt;</span><span class='code-black'>full screen</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span> 
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>  
  
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
     
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='js3_hyperlink' onclick="toggleCode('js3','JavaScript')">[hide JavaScript]</span></p>
<script type='text/javascript' src='samples/media-fullscreen.js'></script>
<!-- Inserting sample for samples/media-fullscreen.js-->
<pre id='js3' class='xaml'><span class='code-blue'>function</span> <span class='code-black'>media_stop</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>

    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"media"</span><span class='code-black'>)</span><span class='code-black'>.</span><span class='code-black'>stop</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>media_pause</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"media"</span><span class='code-black'>)</span><span class='code-black'>.</span><span class='code-black'>pause</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>media_begin</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"media"</span><span class='code-black'>)</span><span class='code-black'>.</span><span class='code-black'>play</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
<span class='code-black'>}</span>


<strong><span class='code-blue'>function</span> <span class='code-black'>canvas_loaded</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span></strong>
<span class='code-black'>{</span>
  
    <span class='code-blue'>var</span> <span class='code-black'>control</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>getHost</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>control</span><span class='code-black'>.</span><span class='code-black'>addEventListener</span><span class='code-black'>(</span><span class='code-red'>"fullScreenChanged"</span><span class='code-black'>,</span> <span class='code-red'>"javascript:onFullScreenChanged"</span><span class='code-black'>)</span><span class='code-black'>;</span>

<span class='code-black'>}</span>

<strong><span class='code-blue'>function</span> <span class='code-black'>toggle_fullScreen</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span></strong>
<span class='code-black'>{</span>
    <span class='code-blue'>var</span> <span class='code-black'>wpfeControl</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>getHost</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>wpfeControl</span><span class='code-black'>.</span><span class='code-black'>fullScreen</span> <span class='code-black'>=</span> <span class='code-black'>!</span><span class='code-black'>wpfeControl</span><span class='code-black'>.</span><span class='code-black'>fullScreen</span><span class='code-black'>;</span>  
   
<span class='code-black'>}</span>

<strong><span class='code-blue'>function</span> <span class='code-black'>onFullScreenChanged</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span></strong>
<span class='code-black'>{</span>


    <span class='code-blue'>var</span> <span class='code-black'>wpfeControl</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>getHost</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-blue'>var</span> <span class='code-black'>buttonPanel</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"buttonPanel"</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>if</span> <span class='code-black'>(</span><span class='code-black'>wpfeControl</span><span class='code-black'>.</span><span class='code-black'>FullScreen</span> <span class='code-black'>=</span><span class='code-black'>=</span> <span class='code-black'>true</span><span class='code-black'>)</span>
    <span class='code-black'>{</span>
      <span class='code-black'>buttonPanel</span><span class='code-black'>.</span><span class='code-black'>opacity</span> <span class='code-black'>=</span> <span class='code-black'>0</span><span class='code-black'>;</span>
    <span class='code-black'>}</span>
    <span class='code-black'>else</span> 
    <span class='code-black'>{</span>
      <span class='code-black'>buttonPanel</span><span class='code-black'>.</span><span class='code-black'>opacity</span> <span class='code-black'>=</span> <span class='code-black'>1</span><span class='code-black'>;</span>
    <span class='code-black'>}</span>
    
    <span class='code-blue'>var</span> <span class='code-black'>mediaPlayer</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"media"</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>mediaPlayer</span><span class='code-black'>.</span><span class='code-black'>width</span> <span class='code-black'>=</span> <span class='code-black'>wpfeControl</span><span class='code-black'>.</span><span class='code-black'>actualWidth</span><span class='code-black'>;</span>
    <span class='code-black'>mediaPlayer</span><span class='code-black'>.</span><span class='code-black'>height</span> <span class='code-black'>=</span> <span class='code-black'>wpfeControl</span><span class='code-black'>.</span><span class='code-black'>actualHeight</span><span class='code-black'>;</span>

<span class='code-black'>}</span>



</pre>


    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag3_hyperlink' onclick="toggle_ag3()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag3_restart' onclick="restart_ag3();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag3Host">
    </div>

    <script type="text/javascript">
    var ag3visible = !(false);

    function toggle_ag3() {
        var text = "preview";
        if (ag3visible) {
            ag3visible = false;

            var element = document.getElementById("ag3Host");
            element.style.display = "none";
			element = document.getElementById("ag3_restart");
            element.style.display = "none";


            document.getElementById("ag3_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag3Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag3", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/media-fullscreen.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag3Host");
            element.style.display = "";
            ag3visible = true;
			element = document.getElementById("ag3_restart");
            element.style.display = "";
            document.getElementById("ag3_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag3() {

	            new agHost(
	                "ag3Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag3", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/media-fullscreen.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag3visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag3();
    </script>

</div>


<div class="section">
<a name="whatsnext"></a><h3>what's next</h3>
<p> The next topic, <a href="animations-noframes.html">animations</a>,
describes how to animate WPF/E objects.</p>
</div>

<div class="copyright-section">
<p>Copyright © 2007 Microsoft Corporation.
All rights reserved. <a href="http://www.microsoft.com/info/cpyright.htm" target="new">Legal Notices</a>.</p>
</div>

    <script type="text/javascript">
    var visibility = new Object();
    for (var i=0; i != 4; i++) {
        visibility["xaml"+i] = true;
        visibility["js"+i] = true;
        visibility["cs"+i] = true;
    }
            
    function toggleCode(id, text) {
        if (visibility[id]) {
            visibility[id] = false;
            document.getElementById(id).style.display = "none";
            document.getElementById(id+ "_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            visibility[id] = true;
            document.getElementById(id).style.display = "";
            document.getElementById(id+ "_hyperlink").innerHTML = "[hide "+ text + "]";
        }
        window.event.returnValue = false;
    }
    </script>
</body>

</html>
